<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css用户界面</title>
    <style>

        .resize{
            padding: 40px;
            width: 300px;
            /*resize: horizontal;*/
            /*resize: vertical;*/
            resize: both;
            border: 2px solid #00b390;
            overflow: auto;
        }
        .outline{

        }
        /*css实现首字母大写*/
        .capitalizeFirst-css{
            text-transform: capitalize;
        }
        /*相同属性，后者会覆盖前者*/
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }

        /*display:table 实现等高*/
        .table {
            display: table;
            margin: 5px;
            width: 1000px;
        }
        .row {
            display: table-row;

        }
        .cell {
            display: table-cell;
            padding: 10px;
            background-color: red;
        }
      .img-xx{
        width: 600px;
        height: 600px;
      }
    </style>
</head>
<body>
<!--Resizing-->
<img class="img-xx" src="//timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587125432408&di=ff8f0c7acf15dd792100deac741a8b96&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D86853839%2C3576305254%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D750%26h%3D390" alt="">
    <div class="resize">
        resize 属性规定是否可由用户调整元素尺寸。Firefox 4+、Safari 以及 Chrome 支持 resize 属性
    </div>
    <div class="capitalizeFirst-css">
        this is a card
    </div>
    <div class="red blue">这是什么颜色</div>
    <div class="blue red">这是什么颜色</div>
    <div class="table">
        <div class="row">
            <div class="cell">内容内容内容内容内容内内容内</div>
            <div class="cell">内容内容内容内容内容内容内容内容内容</div>
            <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        </div>
    </div>
</body>
</html>